{% block sw_text_editor_toolbar %}
<!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
<div
    class="sw-text-editor-toolbar"
    :style="[position, arrowPosition]"
    :class="classes"
    role="menu"
    tabindex="0"
    @click="handleToolbarClick"
>
    {% block sw_text_editor_toolbar_buttons %}

    {% block sw_text_editor_toolbar_buttons_left %}
    <div
        v-if="leftButtons.length > 0"
        class="sw-text-editor-buttons is--left"
    >
        <sw-text-editor-toolbar-button
            v-for="button in leftButtons"
            :key="button.type"
            :is-inline-edit="isInlineEdit"
            :button-config="setButtonValues(button)"
            :disabled="isDisabled(button)"
            @button-click="onButtonClick"
            @menu-toggle="onToggleMenu"
        />
    </div>
    {% endblock %}

    {% block sw_text_editor_toolbar_buttons_middle %}
    <div
        v-if="middleButtons.length > 0"
        class="sw-text-editor-buttons is--middle"
    >
        <sw-text-editor-toolbar-button
            v-for="button in middleButtons"
            :key="button.type"
            :is-inline-edit="isInlineEdit"
            :button-config="setButtonValues(button)"
            :disabled="isDisabled(button)"
            @button-click="onButtonClick"
            @menu-toggle="onToggleMenu"
        />
    </div>
    {% endblock %}

    {% block sw_text_editor_toolbar_buttons_right %}
    <div
        v-if="rightButtons.length > 0"
        class="sw-text-editor-buttons is--right"
    >
        <sw-text-editor-toolbar-button
            v-for="button in rightButtons"
            :key="button.type"
            :is-inline-edit="isInlineEdit"
            :button-config="setButtonValues(button)"
            :disabled="isDisabled(button)"
            @button-click="onButtonClick"
            @menu-toggle="onToggleMenu"
        />
    </div>
    {% endblock %}

    {% block sw_text_editor_toolbar_slot %}
    <slot name="itemsSlot"></slot>
    {% endblock %}
    {% endblock %}
</div>
{% endblock %}
